<template>
  <div class="APP-box" ref="fullscreenElement">
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue"
import userStore from "@/store/index.js"
const { CocosMsg } = userStore()
onMounted(() => {
  toggleFullscreen()

  // setTimeout(() => {
  //   console.log("执行了")

  // }, 1000) // 延迟一段时间，确保页面加载完成
})
const toggleFullscreen = () => {
  if (
    !document.fullscreenElement && // alternative standard method
    !document.mozFullScreenElement &&
    !document.webkitFullscreenElement &&
    !document.msFullscreenElement
  ) {
    // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen()
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen()
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen()
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(
        Element.ALLOW_KEYBOARD_INPUT
      )
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    }
  }
}
watch(
  () => CocosMsg.toggleFullscreen,
  (val) => {
    console.log(val, "监听到了")
    if (val) {
      toggleFullscreen()
    } else {
      toggleFullscreen()
    }
  },
  {
    deep: true
  }
)
</script>
<style scoped lang="less">
.aaa {
  position: absolute;
  right: 95px;
  top: 40px;
  z-index: 100;
}
</style>
